<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约详情</div>
    </div>
    <div class="card1">
      <div class="card1Title">患者信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者姓名">
              <el-input v-model="form.patients_name" disabled />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="form.documentType"
                disabled
                placeholder="就诊卡"
              />
            </el-form-item>
            <el-form-item label="微信昵称">
              <el-input
                v-model="form.WeChatNickname"
                disabled
                placeholder="随便取个名字吧"
              />
            </el-form-item>
            <el-form-item label="就诊人地址">
              <el-input v-model="form.department_address" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊卡号">
              <el-input v-model="form.card_numer" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.patients_id_number" disabled />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.patients_phone" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者头像">
              <el-image
                style="width: 150px; height: 120px"
                :src="form.url"
                :fit="fit"
              />
            </el-form-item>
            <el-form-item label="关系">
              <!-- <el-input v-model="form.patients_identity_information" disabled /> -->
              <span v-if="form.patients_identity_information == 1">本人</span>
              <span v-else-if="form.patients_identity_information == 2"
                >父母</span
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="card1">
      <div class="card1Title">预约信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form1" label-width="120px">
            <el-form-item label="就诊医院">
              <el-input v-model="form1.Clinic_hospital" disabled />
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input v-model="form1.doctor" disabled />
            </el-form-item>
            <el-form-item label="门诊时间">
              <el-input v-model="form1.Outpatient_service_time" disabled />
            </el-form-item>
            <el-form-item label="预约时间">
              <el-input v-model="form1.appointment_time" disabled> </el-input>
            </el-form-item>
            <el-form-item label="退款时间">
              <el-input v-model="form1.refund_time" disabled> </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form1" label-width="120px">
            <el-form-item label="医院地址">
              <el-input v-model="form1.Hospital_address" disabled />
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="form1.doctor_job" disabled />
            </el-form-item>
            <el-form-item label="候诊时间">
              <el-input v-model="form1.Waiting_time" disabled />
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="form1.state" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form1" label-width="120px">
            <el-form-item label="就诊科室">
              <el-input v-model="form1.Clinic_department" disabled />
            </el-form-item>
            <el-form-item label="检测费">
              <el-input v-model="form1.Detect_cost" disabled />
            </el-form-item>
            <el-form-item label="退款原因">
              <el-input v-model="form1.refund_reason" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import storege from "../../utils/storege";
import { slectform } from "../../utils/api/hesuan";
export default {
  props: {},
  setup() {
    const data = reactive({
      form: {},
      form1: {},
    });

    const getform = () => {
      slectform().then((res) => {
        // console.log(res);
        data.form1 = res.data.data[0];
      });
    };
    getform();
    let aa = storege.getStorage("row");
    data.form = aa;

    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.card1 {
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  width: 100%;
  margin-bottom: 30px;
  .card1Title {
    padding: 20px;
    box-sizing: border-box;
    color: #006eff;
    background-color: #f2f2f2;
  }
  .card1Section {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 40px 0;
    box-sizing: border-box;
    .form1 {
      width: 30%;
      // .el-input__wrapper {
      //   box-shadow: 0 0 0 0 gray;
      // }
      .btn {
        background-color: #006eff;
        color: white;
      }
    }
  }
  .anNiu {
    padding: 30px 80px 50px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .el-button {
      padding: 10px 15px;
      box-sizing: border-box;
      font-size: 20px;
    }
  }
}
</style>